let BaseView = require('../BaseView');
let UIConstants = require('../ui_constants');

let templateDiv = `<label>地图信息</label>
<label>状态管理:</label>
<select class="state">
    <option value="1">编辑轨道节点</option>
    <option value="2">编辑洞和桥</option>
    <option value="3">编辑物体</option>
    <option value="4">查看(导入/导出)</option>
</select>
 <label>显示黑边:</label><input type="checkbox" id="map_movie">
            <div>
                <label>导入路径:</label>
                <input class="max_input" id="lvPath" disabled>
                <button id="btn_export">导出</button>
            </div>
            <div>
                <button id="btn_bg">背景</button>
                <input class="max_input" disabled id="bgPath">
                <button id="btn_del_bg">清除背景</button>
            </div>
            <div>
                <label>发射器类型:</label>
                <select id="cannoType">
                    <option value="0">正常</option>
                    <option value="1">双发射点</option>
                    <option value="2">移动发射点</option>
                </select>
                <div id="movable_canno_info">
                    <select id="cannoDir">
                        <option value="3">底部->朝上</option>
                        <option value="4">顶部->朝下</option>
                        <option value="5">右边->朝左</option>
                        <option value="6">左边->朝右</option>
                        <option value="7">中间->朝上下</option>
                        <option value="8">中间->朝左右</option>
                    </select>
                    <label>宽/高:</label><input id="cannoSize" type="number" value="400" >
                </div>
        </div>`;

// let MapModel = require('./mapModel');
let settings = require('../../settings');
let doubleBind = require('../../doubleBind');

class MapView extends BaseView {
    constructor() {
        super();

        // setup
        this.rootEl = document.createElement('div');
        this.rootEl.classList.add('map');
        this.rootEl.classList.add('border');
        this.rootEl.innerHTML = templateDiv;

        let btnExport = this.rootEl.querySelector('#btn_export');
        btnExport.addEventListener('click', () => {

            if(!editor.isViewState()){
                settings.alert('切换到查看模式进行导出....');
                return;
            }

            let finalPath = settings.getSaveFilePath('json');
            console.log('finalPath:', finalPath);
            if (finalPath) {
                editor.exportLevel(finalPath);
            } else {
                console.log('取消导出!');
            }
        }, false);

        // 背景路径
        this._lbBgPath = this.rootEl.querySelector('#bgPath');

        // bg
        let btnBg = this.rootEl.querySelector('#btn_bg');
        btnBg.addEventListener('click', () => {
            let fullpath = settings.selectFile();
            if (fullpath) {
                let mapScene = editor.gameApp;
                mapScene.setBg(this._lbBgPath, fullpath);
            }
        }, false);

        // 清理背景
        let btnBgClear = this.rootEl.querySelector('#btn_del_bg');
        btnBgClear.addEventListener('click', () => {
            if (settings.showConfirmDialog('确定清除背景?')) {
                let mapScene = editor.gameApp;
                mapScene.removeBg();
                this._lbBgPath.value = '';
            }
        }, false);

        this.bindModel();
        this.reset();
    }

    onUpdateCanno() {
        console.log(`onUpdateCanno called!`);
        let mapScene = editor.gameApp;
        let cannoType = this.model.cannoType;
        switch (cannoType) {
            case UIConstants.CannoType.Normal:
                if (mapScene) {
                    mapScene.showSingleBattery();
                    mapScene.nd_scope.active = false;
                }
                this._setMovableCannoInfoVisible(false);
                break;
            case UIConstants.CannoType.Double:
                if (mapScene) {
                    mapScene.showDoubleBattery();
                    mapScene.nd_scope.active = false;
                }
                this._setMovableCannoInfoVisible(false);
                break;
            case UIConstants.CannoType.Move:
                this._setMovableCannoInfoVisible(true);
                if (mapScene) {
                    mapScene.showSingleBattery();
                    this.updateCannoDir(this.model.cannoDir, this.model.cannoSize);
                }
                break;
            default:
                break;
        }
    }

    bindModel() {
        let lst = [];

        let self = this;
        // 这个不进行绑定
        lst.push({
            el: this.rootEl.querySelector('#cannoType'),
            name: 'cannoType',
            domName: 'select',
            bNumber: true,
            callback: function () {
                console.log(`m2dcb called!`);
                self.onUpdateCanno();
            },
        });

        lst.push({
            el: this.rootEl.querySelector('#cannoDir'),
            name: 'cannoDir',
            domName: 'select',
            bNumber: true,
            callback: function () {
                let mapScene = editor.gameApp;
                if (mapScene) {
                    self.updateCannoDir(self.model.cannoDir, self.model.cannoSize);
                }
            }
        });

        lst.push({
            el: this.rootEl.querySelector('#cannoSize'),
            name: 'cannoSize',
            domName: 'input',
            bNumber: true,
            callback: function () {
                let mapScene = editor.gameApp;
                if (mapScene) {
                    self.updateCannoDir(self.model.cannoDir, self.model.cannoSize);
                }
            }
        });

        lst.push({
            el: this.rootEl.querySelector('#lvPath'),
            name: 'lvPath',
            domName: 'input',
            bNumber: false,
        });

        lst.push({
            el: this.rootEl.querySelector('.state'),
            name: 'state',
            domName: 'select',
            bNumber: true,
            callback: function () {
                if(editor.isInited()){
                    editor.updateStateByValue(self.model.state);
                }
            }
        });

        lst.push({
            el: this.rootEl.querySelector('#map_movie'),
            name: 'moiveMode',
            domName: 'checkbox',
            bNumber: true,
            callback: function () {
                // TODO:
                editor.gameApp.showBlack(self.model.moiveMode);
            }
        });

        this.model = {};
        lst.forEach(item => {
            doubleBind(this.model, item);
        });
    }

    reset() {
        // 不参与绑定的属性
        this.model.lvPath = '';

        // 参与绑定的属性
        this.model.cannoType = UIConstants.CannoType.Normal;
        this.model.cannoDir = UIConstants.CannoDir.Toward_Up;
        this.model.cannoSize = 400;
        this._lbBgPath.value = '';
        this.model.state = 1;
        this.model.moiveMode = 0; // 0 表示不显示黑边
        //

    }

    getBgLabelEl() {
        return this._lbBgPath;
    }

    getModel() {
        return this.model;
    }

    _setMovableCannoInfoVisible(value) {
        if (!this.movable_canno_infoEl) {
            this.movable_canno_infoEl = this.rootEl.querySelector('#movable_canno_info');
        }
        if (value) {
            this.movable_canno_infoEl.style.display = 'block';
        } else {
            this.movable_canno_infoEl.style.display = 'none';
        }
    }

    updateCannoDir(newDir, sizeValue) {
        let mapScene = editor.gameApp;
        let sp_battery = mapScene.getDefaultBattery();
        let nd_scope = mapScene.nd_scope;

        if(this.model.cannoType === UIConstants.CannoType.Move){
            nd_scope.active = true;
        }else{
            nd_scope.active = false;
        }

        let degress;
        let bx, by;
        let width = sizeValue;
        let height = settings.BtyNarrow;
        switch (newDir) {
            case UIConstants.CannoDir.Toward_Down:
                degress = 180;
                bx = settings.BtyDefaultMidX;
                by = settings.BtyTopY;
                break;
            case UIConstants.CannoDir.Toward_Up:
                degress = 0;
                bx = settings.BtyDefaultMidX;
                by = settings.BtyBottonY;
                break;
            case UIConstants.CannoDir.Toward_Left:
                degress = 90;
                bx = settings.BtyRightX;
                by = settings.BtyDefaultMidY;
                break;
            case UIConstants.CannoDir.Toward_Right:
                degress = -90;
                bx = settings.BtyLeftX;
                by = settings.BtyDefaultMidY;
                break;
            case UIConstants.CannoDir.Toward_LeftRight:
                degress = -90;
                bx = settings.BtyDefaultMidX;
                by = settings.BtyDefaultMidY;
                break;
            case UIConstants.CannoDir.Toward_UpDown:
                degress = 0;
                bx = settings.BtyDefaultMidX;
                by = settings.BtyDefaultMidY;
                break;
        }
        sp_battery.node.angle = degress;
        sp_battery.node.setPosition(bx, by);
        nd_scope.setContentSize(width, height);
    }


    parseCanno(cannosData) {
        let cannoType = cannosData.type;
        let mapScene = editor.gameApp;

        if (cannoType !== UIConstants.CannoType.Normal &&
            cannoType !== UIConstants.CannoType.Double) {
            this.model.cannoDir = cannoType;
            this.model.cannoType = UIConstants.CannoType.Move;
            this.model.cannoSize = cannosData.size;
        } else {
            this.model.cannoType = cannoType;
        }

        // 直接修改位置
        let batteryProp1 = cannosData.data[0];
        let sp_battery_1 = mapScene.sp_battery_1;
        sp_battery_1.node.setPosition(batteryProp1.x, batteryProp1.y);
        sp_battery_1.node.angle = batteryProp1.degress;
        sp_battery_1.node.zIndex = batteryProp1.zIndex;

        let batteryProp2 = cannosData.data[1];
        let sp_battery_2 = mapScene.sp_battery_2;
        sp_battery_2.node.setPosition(batteryProp2.x, batteryProp2.y);
        sp_battery_2.node.angle = batteryProp2.degress;
        sp_battery_2.node.zIndex = batteryProp2.zIndex;
    }

    getCannoModel() {

        let mapScene = editor.gameApp;
        let sp_battery_1 = mapScene.sp_battery_1;
        let sp_battery_2 = mapScene.sp_battery_2;

        let obj = {};
        if (this.model.cannoType === UIConstants.CannoType.Move) {
            obj.type = this.model.cannoDir;
            obj.size = this.model.cannoSize; //Number(this.cannoSizeEl.value);
        } else {
            obj.type = this.model.cannoType;
        }
        obj.data = [];
        obj.data.push({
            x: ~~sp_battery_1.node.x,
            y: ~~sp_battery_1.node.y,
            degress: ~~sp_battery_1.node.angle,
            zIndex: sp_battery_1.node.zIndex
        });
        obj.data.push({
            x: ~~sp_battery_2.node.x,
            y: ~~sp_battery_2.node.y,
            degress: ~~sp_battery_2.node.angle,
            zIndex: sp_battery_2.node.zIndex,
        });
        return obj;
    }
}

module.exports = MapView;
